@borderColor: rgba(0, 0, 0, 0.12);
@fontColor: rgba(58, 52, 95, 1);
@headerHeight: .58rem;
@columWidth: 12.5%;

.c7n-project-overview-date-table {
  width: 100%;
  height: auto;
  border: 1px solid @borderColor;
  color: @fontColor;

  &-header {
    width: 100%;
    height: @headerHeight;
    border-bottom: 1px solid @borderColor;
    display: inline-flex;

    // box-shadow: 0px 6px 6px -4px rgba(0, 0, 0, 0.12);
    .margin-right {
      margin-right: .09rem;
    }

    &-btn {
      .c7n-pro-btn-flat {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
      }

      width: 0;
      height: 0;
      position: relative;

      &-left {
        z-index: 3;
        left: 1px;
        top: 14px;
      }

      &-right {
        z-index: 3;
        right: 32px;
        top: 14px;
      }
    }

    &-cell {
      width: @columWidth;
      height: @headerHeight;
      font-size: .13rem;
      font-weight: 500;
      padding-top: .2rem;
      // color: rgba(58, 52, 95, 1);
      line-height: .18rem;

      &-top {
        width: 1.29rem; //error
        position: relative;
        overflow: hidden;
        border-right: 1px solid @borderColor;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: .24rem;
          box-sizing: border-box;
          border-bottom: .006rem solid @borderColor;
          transform: rotateZ(24deg) scale(1.2903);
        }

        div {
          font-size: .12rem;
          font-weight: 400;
          line-height: .17rem;
        }

        &-x {
          position: relative;
          right: .23rem;
          bottom: .3rem;
          text-align: right;
        }

        &-y {
          position: relative;
          top: .12rem;
          left: .18rem;
          width: max-content;
          text-align: left;
        }
      }

      &-content {
        margin-left: .04rem;
      }
    }
  }

  &-content {
    width: 100%;
    // height: max-content;
    overflow-y: scroll; // 兼容ie
    overflow-y: overlay;
    overflow-x: hidden;
    min-height: .5rem;

    .c7n-project-overview-date-table-row:not(:last-child) {
      border-bottom: 1px solid @borderColor;
    }
  }

  &-row {
    min-height: 50px;
    width: 100%;
    display: inline-flex;

    &-no-data {
      font-size: 0.12rem;
      font-weight: 400;
      line-height: 0.17rem;
      margin: auto;
    }

    &:not(:last-child) {
      border-bottom: none;
    }

    &-cell {
      width: @columWidth;
      display: flex;
      align-items: center;

      &:not(:last-child) {
        border-right: 1px solid @borderColor;
      }

      &-first {
        width: 1.29rem; //error
        padding: .1rem 0;
        // padding: .10rem 0.3rem;
        display: flex;
        align-items: center;
        justify-content: center;
        // background-color: red;

        span {
          // background-color: red;
        }
      }
    }
  }

  &-cell {
    // height: 123px;
    // width: 50px;
    text-align: center;
    // border-bottom: 1px solid @borderColor;
  }

  .border-right {
    border-right: 1px solid @borderColor;
  }

  &-footer {
    width: 100%;
    border-top: 1px solid @borderColor;
    box-sizing: border-box;
    // box-shadow: 0px -6px 6px -4px rgba(0, 0, 0, 0.12);
  }

  .animate-table {
    animation-duration: .8s;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-name: tableSwitch;
  }

  @keyframes tableSwitch {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }
}
